﻿@{
    ViewBag.Title = "电子记录单";
}

<div id="RecordSheet" style="background-color:white">
    <div class="row col-md-12 ml-0 vh-3">
        <strong class="font-rfs">电子记录单模板</strong>
    </div>
    <div class="row col-md-12 ml-0 min-vh-90">
        <div class="row col-md-12 min-vh-90" style="padding-right:0">
            <div class="col-3 pr-0" style="display: none">
                <label id="RecordSheet-ResultId">@ViewData["ResultId"]</label>
                <label id="RecordSheet-SampleId">@ViewData["SampleId"]</label>
            </div>
            <div class="row col-md-12 vh-5">
                @*<a id="adwon" class="down" href="" download="downImg">生成图片</a>*@
                <button id="RecordSheet-Save" class="btn btn-rfs"><i class="bi-check-lg"></i> 保存</button>
            </div>
            <div class="table-responsive-sm shadow p-0 bg-white rounded col-md-12 min-vh-85 pre-scrollable">
                <table id="RecordSheet-Table" class="table table-striped table-bordered table-sm table-hover">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>样品编号</th>
                            <th>测试名称</th>
                            <th>代码</th>
                            <th>名称</th>
                            <th>修约</th>
                            <th>LowA</th>
                            <th>LowB</th>
                            <th>HighB</th>
                            <th>HighA</th>
                            <th>单位</th>
                            <th>原始结果</th>
                            <th>最终结果</th>
                            <th>结论</th>
                            <th>重测</th>
                            <th>检测序号</th>
                            <th>测试序号</th>
                            <th>状态</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<div class="modal" id="RecordSheet-Modal" role="dialog" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class='modal-header'>
                <p id="RecordSheet-Modal-Title" class="pt-3 pl-3 font-rfs"></p>
                <a data-dismiss="modal" class="modal-close">&times;</a>
            </div>
            <div class="modal-body">
                <div id="RecordSheet-Modal-Embed"></div>
            </div>
        </div>
    </div>
</div>

@section Scripts{
    <script src="~/js/site.js"></script>
    <script src="~/js/bootstrap-table.min.js"></script>
    <script src="~/js/html2canvas.js"></script>

    <script>
        $('#RecordSheet-Table').bootstrapTable('destroy');
        var columns = [{ field: "id", visible: false }, { field: "sampleId", width: "10%" }, { field: "testName" }, { field: "analytesCode" },
        { field: "analytesName" }, { field: "roundingOff" }, { field: "lowA" }, { field: "lowB" }, { field: "highA" }, { field: "highB" },
        { field: "units" }, { field: "original", formatter: SetOriginal, cellStyle: cellStyle }, { field: "final" }, { field: "conclusion" }, { field: "retestNo" },
        { field: "detectionTimes" }, { field: "testTimes" }, { field: "status", width: "3%", align: "center", formatter: SetStatus }];

        $('#RecordSheet-Table').bootstrapTable({
            method: 'post',
            url: "GetTestAnalytes",
            dataType: "json",
            contentType: "application/x-www-form-urlencoded; charset=UTF-8",
            queryParams: function (params) {
                var data = {
                    ResultId: $('#RecordSheet-ResultId').html()
                };
                return data;
            },

            uniqueId: "id",
            locale: "zh-CN",
            columns: columns,

            onClickRow: function (row, $element, field) {
            },
            silent: true,
            formatLoadingMessage: function () {
                return "请稍等，正在加载中...";
            },
            formatNoMatches: function () { 
                return '无符合条件的记录';
            },
            onLoadError: function (data) {
                $('#RecordSheet-Table').bootstrapTable('removeAll');
            },
            onLoadSuccess: function (data) { 
                $('.fixed-table-toolbar').css("height", "0px");
                $('th label').css("margin-bottom", "0px");
                $('td label').css("margin-bottom", "0px");
            },
            formatShowingRows: function (pageFrom, pageTo, totalRows) {
                return "正在显示第" + pageFrom + "到第" + pageTo + "条记录，总共" + totalRows + "条记录 ";
            },
            formatRecordsPerPage: function (pageNumber) {
                return " 每页显示" + pageNumber + '条记录';
            }
        });

        function SetOriginal(value, row, index) {
            var text = value == null ? '' : value;
            return "<input class='table-cell-input' " + "onchange='UpdateFinal(this)' value='" + text + "' style='text-align: center;height: 20px;padding-top: 0px;'/>";
        }

        function cellStyle(value, row, index, field) {
            return { css:{"padding-top":"0px" }};
        }

        function SetStatus(value, row, index) {
            var strHtml = "-";
            if (value == "Done") {
                strHtml = "<i class='bi bi-check-circle-fill'></i>";
            }
            if (value == "OOG") {
                strHtml = "<i class='bi bi-exclamation-circle-fill'></i>";
            }
            if (value == "OOS") {
                strHtml = "<i class='bi bi-x-circle-fill'></i>";
            }
            return strHtml;
        }

        function UpdateFinal(obj) {
            var result = $(obj).val();
            var id = $(obj).parent().parent().attr('data-uniqueid');

            $.post("ManualResult", {
                Id: id,
                Original: result
            }, function (datas) {
                for (var i = 0; i < datas.length; i++) {
                    var row = $('#RecordSheet-Table').bootstrapTable('getRowByUniqueId', datas[i].id); // 获得行数据
                    row.original = datas[i].original;
                    row.final = datas[i].final;
                    row.status = datas[i].status;
                    row.conclusion = datas[i].conclusion;
                    $('#RecordSheet-Table').bootstrapTable('updateByUniqueId', row);  // 更新行数据

                    var index = parseInt($(obj).parent().parent().attr('data-index'));
                    $("#RecordSheet-Table").find("tbody").find("tr").eq(index).removeClass('changeblueColor');
                    $("#RecordSheet-Table").find("tbody").find("tr").eq(index + 1).addClass("changeblueColor");
                    $("#RecordSheet-Table").find("tbody").find("tr").eq(index + 1).find("input").focus();
                }
            });
        }

        $("#RecordSheet-Save").click(function () {

            var canvas2 = document.createElement("canvas");
            let _canvas = document.querySelector('#RecordSheet');
            //此处可换body，或div等
            var w = parseInt(window.getComputedStyle(_canvas).width);
            var h = parseInt(window.getComputedStyle(_canvas).height);
            //将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了，表格border设为0，可能效果更好。
            canvas2.width = w * 2;
            canvas2.height = h * 2;
            canvas2.style.width = w + "px";
            canvas2.style.height = h + "px";

            //可以按照自己的需求，对context的参数修改,translate指的是偏移量
            var context = canvas2.getContext("2d");
            context.scale(2, 2);
            html2canvas(document.querySelector('#RecordSheet'), {
                canvas: canvas2
            }).then(function (canvas) {
                var contentWidth = canvas.width;
                var contentHeight = canvas.height;
                var pageHeigth = contentWidth / 592.28 * 841.89; // a4纸张大小 592.28 * 841.89
                var leftHeight = contentHeight; // 未生成pdf的html页面高度
                var position = 0;  // 页面偏移
                var imgWidth = 595.28;
                var imgHeight = 592.28 / contentWidth * contentHeight;
                var pageData = canvas.toDataURL('image/png', 1.0);
                //window.jsPDF = window.jspdf.jsPDF;
                var PDF = new jsPDF('p', 'pt', 'a4',true);

                if (leftHeight < pageHeigth) {
                    PDF.addImage(pageData, 'PNG', 0, 0, imgWidth, imgHeight, 'FAST');
                } else {
                    while (letfHeight > 0) {
                        PDF.addImage(pageData, 'PNG', 0, 0, imgWidth, imgHeight, 'FAST');
                        leftHeight -= pageHeigth;
                        position -= 841.89;
                        if (leftHeight > 0) {
                            PDF.addPage();
                        }
                    }
                }
                //PDF.save('电子记录单.pdf');
                var datauri = PDF.output('dataurlstring');
                var file = convertBase64ToFile(datauri,"电子记录单");
                SendToPDF(file);
                //canvas转换成url，然后利用a标签的download属性，直接下载，绕过上传服务器再下载
                //document.querySelector('#adwon').setAttribute('href', canvas.toDataURL());
            });
        });

    </script>
}
